<template>
<div class="platform-package-add views-container">
  <div class="wlm-form">
    <div class="wlm-form-header">添加套餐</div>
    <div class="wlm-form-content">
      <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
        <el-form-item label="套餐名称" prop="title">
          <el-input placeholder="请输入套餐名称" v-model="formFormatData.formData.title">
          </el-input>
        </el-form-item>
        <el-form-item label="套餐简介" prop="content">
          <el-input v-model="formFormatData.formData.content" placeholder="请输入套餐简介" type="textarea" :autosize="{ minRows: 4}" maxlength="300"></el-input>
          <div class="textarea-icon">{{formFormatData.formData.content.length}}/300</div>
        </el-form-item>
        <el-form-item label="选择所属产品" prop="pid">
          <el-select v-model="formFormatData.formData.pid" placeholder="请选择">
            <el-option v-for="item in productOptions" :key="item.product_id" :label="item.title" :value="item.product_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formFormatData.formData.sort">
          </el-input>
          <div class="form-help">数字越大，排序越靠前</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
    <el-button size="small" type="primary" @click="formFormatSubmit({ router: { type: 'replace', path: '/operation/platformPackage', code: 1 }})">保存</el-button>
    <router-link tag="span" to="/operation/platformPackage">
      <el-button size="small">返回</el-button>
    </router-link>
  </div>
</div>
</template>

<script>
import {
  packageDetail,
  packageSaveData
} from '@/api/operation'
import {
  platformProduct
} from '@/api/platform'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'PlatformPackageAdd',
  components: {

  },
  directives: {

  },
  created() {
    this.getProduct()
  },
  data() {
    return {
      productOptions: [],
      formFormatData: {
        key: 'smsSettings',
        api: {
          editForm: {
            api: packageDetail
          },
          submitForm: packageSaveData
        },
        formData: {
          title: '',
          content: '',
          pid: '',
          sort: ''
        },
        rules: {
          title: [{
            required: true,
            message: '请输入套餐名称',
            trigger: 'blur'
          }],
          content: [{
            required: true,
            message: '请输入套餐简介',
            trigger: 'blur'
          }],
          pid: [{
            required: true,
            message: '请选择所属产品',
            trigger: 'blur'
          }],
          sort: [{
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }]
        }
      }
    }
  },
  methods: {
    getProduct() {
      platformProduct().then((response) => {
        const {
          data: {
            data: productData = []
          } = {}
        } = response
        this.productOptions = productData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.platform-package-add {
  .textarea-icon{
    width: 270px;
    position: absolute;
    bottom: -3px;
    left: -8px;
    font-size: 12px;
    color: #c0c4cc;
    text-align: right;
  }
}
</style>
